<template>
  <div id="info">
    <img :src="info.img" alt="">
    <div class="name">{{info.name}}</div>
    <div class="p1 p">{{info.detailInfo[0]}}</div>
    <div class="p2 p">{{info.detailInfo[1]}}</div>
    <div class="p3 p">{{info.detailInfo[2]}}</div>
    <a :href="info.streetView[0]" class="streetView1">街景1</a>
    <a :href="info.streetView[1]" class="streetView2">街景2</a>
    <a :href="info.streetView[2]" class="streetView3">街景3</a>
    <a :href="info.website" class="website">官网</a>
  </div>
</template>

<script>
  export default {
    name: "Info",
    props:{
      info:{
        default(){
          return {}
        }
      }
    }
  }
</script>

<style scoped>
  #info{
    position: absolute;
    right: 20px;
    top: 150px;
    width: 400px;
    height: 500px;
    border: 2px solid #a3ccff;
    border-radius: 20px;
    background-color: rgba(0,0,0,0.3);
  }

  img{
    width: 100px;
    height: 100px;
    border-radius: 50px;
  }

  .name{
    position: absolute;
    right: 88px;
    top: 20px;
    width: 180px;
    height: 60px;
    font-size: 30px;
    text-align: center;
    line-height: 60px;
  }

  .p{
    display: -webkit-box;
    position: absolute;
    width: 380px;
    /*height: 110px;*/
    overflow: hidden;
    text-indent: 2em;
    font-size: 16px;
    line-height: 18px;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
  }

  .p1{
    top: 120px;
  }

  .p2{
    top: 224px;
  }

  .p3{
    top: 324px;
  }

  a:nth-child(1){
    left: 20px;
  }

  a{
    display: inline-block;
    position: absolute;
    bottom: 20px;
    height: 50px;
    width: 80px;
    border: 1px solid #13213e;
    border-radius: 4px;
    font-size: 16px;
    color: #13213e;
    line-height: 50px;
    text-align: center;
  }

  a:hover{
    background-color: #237aeb;
  }

  .streetView1{
    left: 20px;
  }

  .streetView2{
    left: 110px;
  }

  .streetView3{
    left: 200px;
  }

  .website{
    left: 290px;
  }


</style>